<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
        <img src="../../asset/github.png" alt="" />
    </a>
    <script src="../../dist/omi.js"></script>
    <script>

        var Todo =  Omi.create("Todo",{
            install:function(){
                this.data.length = this.data.items.length;
            },
            installed:function(){
                this.list.data = this.data;
                this.update();
            },
            add :function(evt) {
                evt.preventDefault();
                this.list.data.items.push(this.refs.textBox.value);
                //alert(this.textBox.value);
                this.data.length = this.list.data.items.length;
                this.update();
                this.refs.textBox.value = "";
            },
            style:function () {
                return 'h3 { color:red; }\
                button{ color:green;}';
            },
            render:function(){
                return '<div>\
                            <h3>TODO</h3>\
                            <List  omi-id="list" name="list" />\
                            <form onsubmit="add" >\
                                    <input  ref="textBox" type="text"  />\
                                    <button>Add #{{length}}</button>\
                            </form>\
                        </div>';
             }
        })

        var List = Omi.create("List",{
            render :function() {
                return '<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>';
            }
        })


        var todo = new Todo({ items: ["aa","bb"] });

        Omi.render(todo,'body',true);

        setTimeout(function(){
           todo.list.remove();
        },3000)

        setTimeout(function(){
          //  todo.list.restore();
        },6000)
    </script>
</body>
</html>